@import './color.styl'
$black = #000
$white = #fff
.welfare-model
  display: flex
  flex-direction: column
  align-items: center
  color: $gray
  background: rgba(37, 38, 45, 0.4)

  .top
    margin: 20px 0
    font-size: 16px
    color: #ff6a3a
    border-bottom: 1px solid $gray-light
    .icon
      display: block
      height: 60px
      max-height: 60px
      margin-bottom: 20px
      img
        height: 100%
    .text
      line-height: 30px
    .btn
      width: 120px
      color: $blue
      cursor: pointer
      font-size: $font-size-h5
      margin: 20px auto
  .bottom
    .btn
      width: 30%
      padding: 0 15px
      font-size: 14px
      border: 1px solid $gray-light
      border-radius: 4px
      line-height: 40px
      font-size: 14px
      color: $black-light
  .record-panel
    width: 100%
    height: 80%
    overflow-y: auto
    h3
      font-size: 16px
      color: $black
      margin-bottom: 20px
      padding: 10px 0
      border-bottom: 1px solid $gray-light
    .record-list
      .record-item
        display: flex
        color: $black-light
        margin-bottom: 10px
        & > div
          flex: 1
          line-height: 32px
        .icon
          flex: 0 0 32px
          width: 32px
          height: 32px
          img
            width: 100%
            height: 100%
        .time
          flex: 2
        .title, .money
          padding-left: 10px
